<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="../css/1.css"/>
		<script src="jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var time=null;
				var li1=$(".aa ul li:first").innerWidth();/* li的宽度 */
				console.log(li1);
				time=setInterval(function(){
					play();
				},2000)
				
				
				function play(){
					$(".aa .bb").animate({left:-li1},function(){
						$(this).css("left",0).find("li:first").appendTo(this);
					})
				}
				$(".aa ul").hover(function(){
					clearInterval(time);
				},function(){
					time=setInterval(function(){
						play();
					},2000)
				})
				$(".right-botton").click(function(){
					play();
				})
				$("left-botton").click(function(){
					$(".aa .bb").css("left",-li1).find("li:last").appendTo(".aa .bb");
					$(".aa .bb").animate({left:0});
				})
			})
		</script>
	</head>
	<body>
		<div class="aa">
			<ul class="bb">
					<li><img src="../img/1.jpg" alt=""></li>
					<li><img src="../img/2.jpg" alt=""></li>
					<li><img src="../img/3.jpg" alt=""></li>
					<li><img src="../img/4.jpg" alt=""></li>
					<li><img src="../img/5.jpg" alt=""></li>
			</ul>
			<div class="left-botton indexs">&lt;</div>
			<div class="right-botton indexs">&gt;</div>
			<ul class="cc indexs">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>